<template>
  <div id="authentication">
    <!-- top part -->
    <div class="describe">
      <span
        >按照法律法规要求，进一步使用区块链服务需要提供身份信息，请填写真实、有效的信息。</span
      >
      <span
        >实名认证后即可创建区块链地址并支付购买，请确认注册手机号与实名信息匹配。</span
      >
    </div>

    <!-- form part -->
    <div class="certifiedForm">
      <van-field
        class="nameInput"
        label="真实姓名"
        v-model.trim="certifiedForm.actualName"
        type="text"
        placeholder="请输入您的真实姓名"
        :border="false"
        @input="actualNameInputing"
      />
      <van-field
        class="idInput"
        label="身份证号"
        v-model.trim="certifiedForm.IDCard"
        type="text"
        placeholder="请输入您的身份证号"
        :border="false"
        @input="IDCardInputing"
      />
    </div>

    <!-- privacy part -->
    <div class="certifiedPrivacy" v-show="hideshow">
      <img
        class="privacy_left"
        @click="toggleAgree"
        v-if="isAgree"
        src="@/assets/images/mobile_black/login/agree.png"
      />
      <img
        class="privacy_left"
        @click="toggleAgree"
        v-else
        src="@/assets/images/mobile_black/login/disagree.png"
      />

      <span class="privacy_right"
        >我已仔细阅读并同意<span @click.stop="gotoPrivacy">《隐私政策》</span>和
        <span @click.stop="gotoUserAgreement">《用户服务协议》</span>
      </span>
    </div>

    <!-- bottom part -->
    <div class="certifiedBtn" v-show="hideshow">
      <button
        v-if="isCodeBtnDisabled"
        class="formBtn btn_grey"
        :disabled="isCodeBtnDisabled"
      >
        点击认证
      </button>
      <button
        v-else
        class="formBtn btn_color"
        :disabled="isCodeBtnDisabled"
        @click.stop="openConfirmDialog"
      >
        点击认证
      </button>
    </div>

    <!-- confirm dialog -->
    <van-dialog
      v-model="isShowConfirmDialog"
      show-cancel-button
      cancel-button-text="返回修改"
      confirm-button-text="继续认证"
      confirm-button-color="#00ffb0"
      :beforeClose="defaultClose"
      @cancel="closeConfirmDialog"
      @confirm="certified"
    >
      <span>确认认证吗?</span>
      <span>实名信息认证后不可修改，请核验信息无误后继续。</span>
    </van-dialog>
  </div>
</template>

<script>
// vuelidate 用于表单验证
import { required } from "vuelidate/lib/validators";
import { mapActions } from "vuex";
// api
import { userAuthApi } from "@/api";
import { iscode, reHeight } from "@/utils";

export default {
  name: "Authentication",
  data() {
    return {
      // 表单数据收集
      certifiedForm: {
        actualName: "",
        IDCard: "",
      },
      // 是否勾选隐私政策和用户协议
      isAgree: false,
      // 按钮是否禁用
      isCodeBtnDisabled: true,
      //显示或者隐藏footer
      hideshow: true,
      // 是否显示确认认证谈弹窗
      isShowConfirmDialog: false,
    };
  },
  // vuelidate验证表单
  validations: {
    certifiedForm: {
      actualName: {
        required,
      },
      IDCard: {
        required,
      },
    },
  },
  watch: {
    // 解决手机键盘弹起布局错位问题
    showHeight: function() {
      if (this.docmHeight > this.showHeight) {
        //隐藏
        this.hideshow = false;
      } else {
        //显示
        this.hideshow = true;
      }
    },
  },
  mounted() {
    //监听事件
    window.onresize = () => {
      return (() => {
        this.showHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
      })();
    };

    reHeight("authentication", this);
  },
  methods: {
    // -----vuex-----
    // 获取用户信息（用于认证之后更新vuex里的userInfo数据）
    ...mapActions(["getUserInfo"]),

    // -----async-----
    // 身份认证
    async userAuth() {
      let result = await userAuthApi({
        realname: this.certifiedForm.actualName,
        idcard: this.certifiedForm.IDCard,
      });
      if (iscode(result)) {
        const that = this;

        this.$toast({
          className: "authentication_ok",
          message: "认证成功",
          duration: 2000,
          icon: "passed",
          onClose() {
            that.getUserInfo();
            that.initForm();
            // 如果商品id参数存在，则跳转到响应页面
            if (that.$route.query.id) {
              that.$router.push({
                path: "/mail/productDetail",
                query: {
                  id: that.$route.query.id - 0,
                },
              });
            } else {
              that.$router.push("/personalCenter");
            }
          },
        });
      }
    },

    // -----common-----
    // 用于初始化清空表单残留
    initForm() {
      this.certifiedForm = {
        actualName: "",
        IDCard: "",
      };
      this.isAgree = false;
      this.isCodeBtnDisabled = true;
    },
    // 姓名输入框输入时
    actualNameInputing() {
      if (!this.$v.$invalid && this.isAgree) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },
    // 身份证输入框输入时
    IDCardInputing() {
      const reg = /[\W]/g;
      this.certifiedForm.IDCard = this.certifiedForm.IDCard.replace(reg, "");

      if (!this.$v.$invalid && this.isAgree) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },
    // 确认创建
    certified() {
      this.closeConfirmDialog();
      const that = this;

      // 加载
      this.$toast.loading({
        className: "loading_style",
        message: "正在加载",
        forbidClick: true,
        duration: 2000,
        onClose() {
          that.userAuth();
        },
      });
    },
    // 阻止dialog默认的关闭事件
    defaultClose(action, done) {
      done(false);
    },
    // 打开确认认证弹窗
    openConfirmDialog() {
      this.isShowConfirmDialog = true;
    },
    // 关闭确认认证弹窗
    closeConfirmDialog() {
      this.isShowConfirmDialog = false;
    },
    // 切换是否同意协议和政策
    toggleAgree() {
      this.isAgree = !this.isAgree;
      if (!this.$v.$invalid && this.isAgree) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },

    // -----router-----
    // 跳转到用户协议界面
    gotoUserAgreement() {
      this.$router.push("/userAgreement");
    },
    // 跳转到隐私政策界面
    gotoPrivacy() {
      this.$router.push("/privacy");
    },
  },
};
</script>

<style lang="less" scoped>
#authentication {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  padding: 0 30px;

  // >> 顶部描述信息
  .describe {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #2b2c2d;
    margin-top: 70px;

    span {
      width: 100%;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40px;
      padding: 0 30px;
      margin-top: 24px;
    }
    span:nth-child(2) {
      margin-bottom: 30px;
    }
  }

  // >> 登录表单区域
  .certifiedForm {
    width: 100%;
    margin-top: 74px;

    /deep/.van-cell {
      background: none !important;
    }
    /deep/.van-field__control {
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    /deep/.van-field__label {
      display: flex;
      align-items: center;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    .nameInput,
    .idInput {
      padding: 0;
      padding-bottom: 35px;
      border-bottom: 2px solid #444444;
    }
    .idInput {
      margin-top: 36px;
    }
  }

  // >> 用户协议
  .certifiedPrivacy {
    display: flex;
    // width: 100%;
    position: absolute;
    left: 30px;
    bottom: 104px;

    .privacy_left {
      width: 28px;
      height: 28px;
      margin-top: 5px;
    }

    .privacy_right {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-left: 20px;

      span {
        color: #00ffb0;
      }
    }
  }

  // >> 认证按钮
  .certifiedBtn {
    position: absolute;
    left: 0;
    bottom: 184px;
    width: 100%;
    padding: 0 30px;

    /deep/.formBtn {
      width: 100%;
      height: 72px;
      font-size: 32px;
      font-family: Microsoft YaHei;
      border-radius: 0;
      color: #2b2c2d;
      font-weight: 500;
      border: none;
      background: none;
      background-position: center center;
      background-size: 100% 100%;
    }
    .btn_color {
      background-image: url("../../assets/images/mobile_black/home/btn_color.png");
    }
    .btn_grey {
      background-image: url("../../assets/images/mobile_black/home/btn_grey.png");
    }
  }

  // >> 认证弹窗
  /deep/.van-dialog {
    width: 490px;
    height: 300px;
    background: none;
  }
  /deep/.van-dialog__content {
    display: flex;
    flex-direction: column;
    background: #1e2020;
    height: 220px;
    text-align: center;
    padding: 0 30px;

    span {
      font-size: 25px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 25px;
    }
    span:nth-child(1) {
      font-size: 30px;
      font-weight: 600;
      color: #ffffff;
    }
    span:nth-child(2) {
      margin-top: 20px;
    }
  }
  /deep/.van-dialog__footer {
    background: #1e2020;
    font-size: 30px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;

    button {
      background: #1e2020;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      height: 80px;
    }

    button:nth-child(1) {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
